<template>
  <main class="bg-white flex flex-col p-2">
    <div class="tools flex justify-between h-[400px]">
      <div class="w-[43%]">
        <Codemirror
          v-model:value="source"
          :options="cmOptions"
          border
          placeholder=""
          height="100%"
          @change="onChange"
        ></Codemirror>
      </div>
      <div>
        <button class="mybg text-white rounded p-2 mt-[100px]">转换>></button>
      </div>
      <div class="w-[43%]">
        <Codemirror v-model:value="output" :options="cmOptions" class="h-[400px]"></Codemirror>
      </div>
    </div>
  </main>
</template>
<script lang="ts" setup>
import 'codemirror/addon/display/placeholder.js'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/addon/display/placeholder.js'
import 'codemirror/theme/3024-day.css'
import localforage from 'localforage'
import { ref } from 'vue'
import { CreateDatabase } from '@/util/CreateDatabase'
import { StrHelp } from '@/util/StrHelp'
const createDatabase = new CreateDatabase()
const strHelp = new StrHelp()

const cmOptions = {
  mode: 'text/javascript',
  theme: '3024-day',
  lineNumbers: true,
  smartIndent: true,
  indentUnit: 2,
  foldGutter: true,
  styleActiveLine: true,
  lineWrapping: true
}
const source = ref('')
const output = ref('')
const onChange = () => {
  // source.value = strHelp.replaceBlank(source.value)
  localforage.setItem('mysql_create', source.value)
  output.value = createDatabase.create_mysql(source.value)
}
const load = () => {
  localforage.getItem('mysql_create').then((res) => {
    if (res) {
      source.value = res as string
    }
  })
}
load()
</script>
<style lang="scss" scoped></style>
